<template>
  <div class="soltTitle">
    <nav>
      <span class="navSpan_l" @click="retreat">＜</span>
      <title>{{title}}</title>
      <span v-show="!showhome" class="navspan_r" @click="goToUrl">{{navspan}}</span>
      <span v-show="showhome" class="navspan_r" @click="goToUrl">
        <van-icon name="wap-home-o" />
      </span>
    </nav>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      title: "", // 标题
      navspan: "新增", // nav 右侧内容
      showhome: true
    };
  },
  created() {
    if (this.$route.path == "/visitlist") {
      this.title = "选择客户";
      this.showhome = true;
    } else if (this.$route.path == "/visitrecord") {
      this.title = "拜访记录";
      this.showhome = false;
    } else if (this.$route.path == "/visitadd") {
      this.title = "新增拜访记录";
    } else if (this.$route.path == "/visitquery") {
      this.title = "查询";
      this.navspan = "";
      this.showhome = false;
    }
  },
  methods: {
    goToUrl() {
      if (this.$route.path == "/visitrecord") {
        this.$router.push("/visitadd");
      } else {
        this.$router.push("/home");
      }
    },
    // 后退
    retreat() {
      this.$router.back();
    }
  }
};
</script>

<style scoped>
nav {
  height: 50px;
  background-color: #1989fa;
  line-height: 50px;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  display: flex;
}
nav > .navSpan_l {
  flex: 1;
  font-size: 26px;
}
nav > title {
  flex: 12;
  display: inline;
}
nav > .navspan_r {
  flex: 1.8;
}
</style>